/**
 * 拖拽事件处理
 * Author: Zane
 * Email: 873934580@qq.com
 * Date: 2023/6/12
 */
import Sortable from 'sortablejs'
import { byId, install, swap } from './form'
import { nextTick } from 'vue'

const DRAG_NAME = 'sl-designer'
// 布局容器
const LAYOUT = 'layout'
// 嵌套组件表
const NEST_DRAG: { [keys: string]: any } = {}

// 待拖拽的Element对象列表
let formListEl: HTMLCollectionOf<Element> | undefined = undefined

const log = (name: string, evt: any) => {
    console.table([
        {
            event: name,
            id: evt.item.getAttribute('data-id'),
            toId: evt.to.id,
            newIndex: evt.newIndex,
        },
    ])
}

/**
 * 初始化拖拽对象
 */
export const initFormDrag = () => {
    formListEl = document.getElementsByClassName('sl-item')
    if (formListEl.length === 0) return
    for (let i = 0; i < formListEl.length; i++) {
        const el = formListEl.item(i) as HTMLElement
        Sortable.create(el, {
            group: { name: DRAG_NAME, pull: 'clone', put: false },
            ghostClass: 'sortable-ghost',
            sort: false,
            animation: 150,
            draggable: '.item',
            dataIdAttr: 'data-id',
            onChoose: function (evt) {},
            onUnchoose: function (evt) {},
            onAdd: function (evt) {},
            onStart: (evt) => {},
        })
    }
}

/**
 * 初始化目标对象
 */
export const initTargetDrag = () => {
    const el = document.getElementById('form')!
    Sortable.create(el, {
        group: DRAG_NAME,
        ghostClass: 'sortable-ghost', // 拖拽开始的时候样式
        chosenClass: 'sortable-chosen', // 拖拽到目标后的样式
        filter: '.el-empty',
        handle: '.my-handle',
        animation: 150,
        onChoose: () => {
            console.log('元素被选中')
        },
        onAdd: function (evt) {
            // 这里需要处理一下
            const type = evt.item.getAttribute('data-id')!
            const ctx = install(type, evt.newIndex!)!
            evt.item.remove()
            if (type === LAYOUT) {
                nextTick().then(() => {
                    nestDrag(ctx.id)
                })
            }
        },
        onUpdate: function (evt) {
            swap(evt.newIndex!, evt.oldIndex!)
        },
    })
}

/**
 * 嵌套拖拽组件 // TODO 嵌套组件有BUG 需要处理
 * @param parentId
 */
export const nestDrag = (parentId: string) => {
    const el = document.getElementById(`row_${parentId}`)!
    console.log(el, `row_${parentId}`)
    NEST_DRAG[parentId] = Sortable.create(el, {
        group: DRAG_NAME,
        filter: '.el-empty',
        handle: `.handle_${parentId}`,
        sort: true,
        onAdd: function (evt) {
            console.log('嵌套新增的', evt)
            const type = evt.item.getAttribute('data-id')!
            const ctx = install(type, evt.newIndex!, parentId)!
            if (type === LAYOUT) {
                nextTick().then(() => {
                    nestDrag(ctx.id)
                })
            }
        },
        // 列表内元素顺序更新的时候触发
        onUpdate: function (evt) {
            console.log('变动', evt)
            byId(parentId)?.swap(evt.newIndex!, evt.oldIndex!)
        },
        onMove: (evt) => {
            console.log('元素移动', evt)
        },
    })
}
